<template>
  <div>
    <el-dialog :title="`${formData.phaseDesc}`" :visible.sync="isShowDATA" :close-on-click-modal="false"
      :before-close="handleClose" :width="screenWidth > 1310 ? '55%' : '70%'" v-dialogDrag>
      <el-form :model="formData" label-width="80px" label-position="left" ref="ruleForm" size="small" :hide-required-asterisk="true">
        <el-row :gutter="24" class="gz-form-row">
          
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.isAuto">{{$t('common.auto_start')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="10" :md="8" :lg="8" :xl="5">
            <el-form-item :label="$t('common.start_delay')" label-width="80px" class="inputPadding">
              <el-input type="number" v-model="formData.delayTime">
                <template slot="append">min</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.mode">{{$t('common.operation_signature')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.checks">{{$t('common.review_confirmation')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <!-- </el-row>
                <el-row> -->
          <!-- <el-col :xs="9" :sm="9" :md="8" :lg="6" :xl="6">
                  <el-form-item :label="$t('basic.stage_name')">
                    <el-input disabled v-model="formData.phaseDesc" placeholder="" clearable></el-input>
                  </el-form-item>
                </el-col> -->
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
            <el-form-item label-width="0" style="text-align: right;" class="btnGourd">
              <el-button type="primary" :disabled="isreadOnly" size="mini" @click="handleEdit()">{{ $t("common.edit") }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-row :gutter="24">
          <el-col :xs="24">
            <div class="tableAuto">
              <el-table :data="tableData" height="180px" @row-click="rowClick" style="width:100%" border stripe v-loading="tableLoading"
                :header-cell-style="{background:'#EAEBEC'}" ref="refTable" highlight-current-row>
                <el-table-column label="" width="50" align="center">
                  <template slot-scope="scope">
                    <div>
                      <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column type="index" :label="$t('common.number')" width="50" align="center"></el-table-column>
                <el-table-column prop="paraName" show-overflow-tooltip :label="$t('basic.parameter_name')" width="150"></el-table-column>
                <el-table-column prop="type" show-overflow-tooltip :label="$t('run.data_type')" width="150">
                  <template slot-scope="scope">
                    {{getDataType(scope.row.type)}}
                  </template>
                </el-table-column>
                <!--                              <el-table-column prop="type" show-overflow-tooltip label="读写" width="150">-->
                <!--                                <template slot-scope="scope">-->
                <!--                                  {{getwrName(scope.row.wr)}}-->
                <!--                                </template>-->
                <!--                              </el-table-column>-->
                <el-table-column prop="uom" show-overflow-tooltip :label="$t('basic.company')" width="80"></el-table-column>
                <el-table-column prop="target" show-overflow-tooltip :label="$t('basic.target')" width="80">
                  <template slot-scope="scope">{{getTagVal(scope.row.type,scope.row.target,scope.row.enumGroupId)}}</template>
                </el-table-column>
                <el-table-column prop="flastModifyComment" show-overflow-tooltip label="描述"></el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :xs="24">
            <div class="pagination-area">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]"
                :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper"
                :total="pager.total">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-form :model="formData">
          <el-form-item :label="$t('common.operating_instructions')">
            <el-input rows="3" type="textarea" v-model="formData.guideInfo" placeholder="" clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('basic.remarks')">
            <el-input rows="3" type="textarea" v-model="formData.flastModifyComment" placeholder="" clearable></el-input>
          </el-form-item>
        </el-form>

      </el-col>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :disabled="isreadOnly" :loading="loading" @click="handleConfirmStorage('ruleForm')">保
          存</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>

    </el-dialog>

    <el-dialog :title="title == 1 ? '新增' : '编辑'" v-dialogDrag :visible.sync="isShowAdd" :close-on-click-modal="false" :before-close="handleCloseAdd"
      :width="screenWidth > 1024 ? '30%' : '55%'">
      <el-form :model="ruleForm" label-width="85px" ref="formName" size="small" :rules="addRules" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <el-col :xs="24">
            <el-form-item :label="$t('basic.parameter_name')" prop="paraName">
              <el-input type="text" v-model="ruleForm.paraName" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('run.data_type')" prop="type" class="w-100">
              <el-select v-model="ruleForm.type" placeholder="" clearabl>
                <el-option v-for="(item,index) in dataTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.company')" prop="uom" class="w-100">
              <el-select v-model="ruleForm.uom" placeholder="" clearable>
                <el-option v-for="(item,index) in uomIdList" :key="index" :label="item.fid" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--                  <el-col :xs="24">-->
          <!--                    <el-form-item label="读写" prop="wr" class="w-100">-->
          <!--                      <el-select v-model="ruleForm.wr" placeholder="" clearable>-->
          <!--                        <el-option v-for="(item,index) in wrList" :key="index" :label="item.label" :value="item.value"></el-option>-->
          <!--                      </el-select>-->
          <!--                    </el-form-item>-->
          <!--                  </el-col>-->
          <el-col :xs="24">
            <el-form-item :label="$t('basic.parameter_name')" prop="paraName">
              <el-input type="text" v-model="ruleForm.paraName" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" v-show="ruleForm.type == 1">
            <el-form-item :label="$t('basic.target')" prop="target">
              <el-input type="number" v-enterNumber v-model="ruleForm.target" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" v-show="ruleForm.type === 0">
            <el-form-item :label="$t('basic.target')" prop="target">
              <el-input type="number" v-enterNumber2 v-model="ruleForm.target" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" v-show="ruleForm.type == 2 ">
            <el-form-item :label="$t('basic.target')" prop="target">
              <el-input type="text" v-model="ruleForm.target" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" v-show="ruleForm.type == 4 ">
            <el-form-item :label="$t('basic.target')" prop="target">
              <el-select v-model="ruleForm.target" :placeholder="$t('common.please_sel')">
                <el-option v-for="(ele,ids) in selectOptions" :key="ids" :label="ele.enumsDesc" :value="ele.enumsValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="描述" prop="flastModifyComment">
              <el-input rows="3" type="textarea" v-model="ruleForm.flastModifyComment" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :disabled="isreadOnly" :loading="loadingTab" @click="handleConfirm('formName')">保
          存</el-button>
        <el-button @click="handleCloseAdd()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { configure } from "@/api/configure"
import { formula } from "@/api/formula"
export default {
  props: {
    isShowDATA: Boolean,
    tdIndex: Number,
    stepObj: Object,
    isreadOnly: Boolean
  },
  data () {

    return {
      screenWidth: document.body.clientWidth,
      formData: {
        seqNo: "",
        stepDesc: "",
        isActive: false,
        isAuto: true,
        signitature: "",
        delayTime: "",
        mode: 0,
        checks: "",
        stepNo: "",
        phaseDesc: "全手动",
        flastModifyComment: "",
        guideInfo: "",
        stepSort: 0,
      },
      ruleForm: {
        paraName: "", //参数名称
        uom: "", //单位
        type: "", //数据类型
        target: "", //目标值
        flastModifyComment: "", //描述
      },
      dataTypeList: [{
        label: "Float",
        value: 0
      }, {
        label: "Int",
        value: 1
      }, {
        label: "String",
        value: 2
      }, {
        label: "Bool",
        value: 3
      }, {
        label: "枚举",
        value: 4
      }],
      title: 1,
      height: "calc(100vh - 400px)",
      tableData: [],
      tableLoading: false,
      loading: false,
      isShowAdd: false,
      loadingTab: false,
      uomIdList: [],
      radioId: "",
      isAddDialog: false,
      stepLoading: false,
      addRules: {
        paraName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
        uom: [{ required: true, message: '单位不能为空', trigger: 'change' }],
        type: [{ required: true, message: '数据类型不能为空', trigger: 'change' }]
      },
      wrList: [{
        label: "读写",
        value: 0
      }, {
        label: "只读",
        value: 1
      }, {
        label: "只写",
        value: 2
      }],
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      enumList: [],
      selectOptions: [],
    }
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    },
    isShowDATA (val) {
      if (val) {
        // this.formData.signitature = this.stepObj.signitature == 1 ? true : false
        this.radioId = ''
        this.formData.seqNo = this.tdIndex
        this.formData.stepNo = this.tdIndex
        this.formData.stepDesc = this.stepObj.stepDesc ?? this.stepObj.texts
        this.formData.isAuto = this.stepObj.isAuto == 1 ? true : false
        this.formData.isActive = this.stepObj.isActive == 1 ? true : false
        this.formData.checks = this.stepObj.checks == 1 ? true : false
        this.formData.mode = this.stepObj.mode == 1 ? true : false
        this.formData.delayTime = this.stepObj.delayTime ?? 0
        this.formData.fid = this.stepObj.fid || this.stepObj.fId
        this.formData.phaseDesc = this.stepObj.texts
        this.formData.flastModifyComment = this.stepObj.flastModifyComment
        this.formData.guideInfo = this.stepObj.guideInfo
        this.formData.stepSort = this.stepObj.stepSort ?? 0

        if (this.stepObj.fid || this.stepObj.fId) {
          this.phaseDataList()
        } else {
          this.tableData = []
          this.pager.total = 0
        }
      }
    }
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  created () {
    this.phaseDataList()
    this.getEnumList()
  },
  methods: {
    getEnumList () {
      const param = {
        page: 0,
        size: 999,
      }
      configure.getEnumsList(param).then(res => {
        if (res.code == 200) {
          this.enumList = res.data.rows
        }
      })
    },
    handleClose () {
      this.$emit("closePH", "DATA")
    },
    handleConfirmStorage (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            phaseDesc: this.formData.phaseDesc,
            isActive: this.formData.isActive == false ? 0 : 1,
            isAuto: this.formData.isAuto == false ? 0 : 1,
            mode: this.formData.mode == false ? 0 : 1,
            checks: this.formData.checks == false ? 0 : 1,
            delayTime: this.formData.delayTime,
            phaseCode: this.stepObj.phaseCode,
            operationId: this.stepObj.operationId,
            type: this.stepObj.type,
            seqNo: this.stepObj.seqNo,
            stepNo: this.stepObj.stepNo,
            serialNo: this.stepObj.serialNo,
            flastModifyComment: this.formData.flastModifyComment,
            guideInfo: this.formData.guideInfo,
            stepSort: this.formData.stepSort,
          }
          if (this.formData.fid) {
            param.fid = this.formData.fid
          }
          console.log(this.formData.isActive)
          this.loading = true
          formula.phaseAdd(param).then(res => {
            this.loading = false
            if (res.code == 200) {
              let obj = {
                mode: this.stepObj.mode,
                isAuto: this.formData.isAuto == false ? 0 : 1,
                isActive: this.formData.isActive == false ? 0 : 1,
                operationId: this.stepObj.operationId,
                seqNo: this.stepObj.seqNo,
                serialNo: this.stepObj.serialNo,
                text: this.stepObj.phaseDesc
              }
              this.$emit("uptionData", obj)
              this.$emit("closePH", "DATA")
            } else {
              this.$message.error(res.msg);
            }
          })
        } else {
          return false
        }
      })
    },
    phaseDataList () {
      const param = {
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        phaseId: this.stepObj.fid || this.stepObj.fId,
      }
      console.log(param)
      this.tableLoading = true
      formula.phaseDataList(param).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
        this.tableLoading = false
      })
    },
    // 获取计量单位列表
    getUomList () {
      const param = {
        page: 1,
        size: 9999
      }
      configure.getUomList(param).then(res => {
        if (res.code == 200) {
          this.uomIdList = res.data.rows
        }
      }).catch(e => {

      })
    },
    handleConfirmForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            ...this.ruleForm,
            phaseId: this.parentFid
          }
          this.loadingTab = true
          formula.phaseDataAdd(param, this.title).then(res => {
            if (res.code == 200) {
              this.$message({ duration: 1000, type: 'success', message: res.msg });
              this.phaseDataList()
              this.isShowAdd = false
            } else {
              this.$message.error(res.msg);
            }
            this.loadingTab = false
          })
        }
      })
    },
    handleConfirm () {
      let param = Object.assign({}, this.ruleForm)
      this.loading = true
      console.log(param);
      formula.phaseDataAdd(param, '编辑').then(res => {
        this.loading = false
        if (res.code == 200) {
          this.$message({ duration: 1000, type: 'success', message: res.msg });
          this.phaseDataList();
          this.isShowAdd = false
        } else {
          this.$message.error(res.msg);
        }
      }).catch(e => {
        this.loading = false
      })
    },
    rowClick (row) {
      this.radioId = row.fid;
      this.$refs.refTable.setCurrentRow(row);
    },
    handleAdd () {
      this.title = 1
      this.ruleForm = {}
      try {
        this.$refs['formName'].resetFields();
      } catch (e) { }
      this.isShowAdd = true
    },
    handleEdit () {
      if (this.radioId === '') {
        this.$message.error('请选择修改数据');
        return
      }
      const item = this.tableData.find(item => item.fid == this.radioId)
      if (item) {
        this.ruleForm = Object.assign({}, item)
      }
      this.title = 2
      this.selectOptions = this.enumList.filter(ii => ii.enumsGrpId == item.enumGroupId)
      this.selectOptions.forEach(ii => {
        ii.enumsValue = '' + ii.enumsValue
      })

      this.isShowAdd = true
    },
    async handleDel () {
      if (this.radioId === '') {
        this.$message.error('请选择要删除的数据');
        return
      }
      let that = this
      const item = this.tableData.find(item => item.fid == this.radioId)
      this.$customConfirm({
        onok () {
          formula.removePhaseAuto(item.fid).then(res => {
            if (res.code == 200) {
              that.phaseDataList()
              that.radioId = ''
              that.$message({ duration: 1000, type: 'success', message: '删除成功!' });
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      });
    },
    handleCloseAdd () {
      this.isShowAdd = false
    },
    handleSizeChange (val) {
      this.pager.pageSize = val
      this.phaseDataList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.phaseDataList()
    },
    uptionList () {
      this.phaseDataList()
    },
    getDataType (id) {
      if (!id && id !== 0) return ''
      return this.dataTypeList.find(item => item.value == id).label
    },
    getwrName (id) {
      if (!id && id !== 0) return ''
      return this.wrList.find(item => parseInt(item.value) == id).label
    },
    getTagVal (type, val, enumGrpId) {
      if (type == 4) {
        if (val == null) return ''
        let enumTemp = this.enumList.find(ii => ii.enumsGrpId == enumGrpId && ii.enumsValue == val)
        return enumTemp.enumsDesc
      } else {
        return val
      }
    },
  },
}
</script>

<style scoped>
@media screen and (max-width: 1024px) {
  .tableAuto {
    width: 100%;
    overflow: auto;
  }
}
@media screen and (max-width: 1200px) {
  .btngroup {
    margin-bottom: 20px;
  }
  /* .qianming{
          clear: both;
        }
        .phaseName{
          clear: none !important;
        } */
}
.material >>> .el-select {
  width: 100%;
}
.pagination-area {
  padding: 10px;
}
.form >>> .el-row {
  display: flex;
  flex-wrap: wrap;
}

.pagination-area {
  padding: 10px;
}
.gz-form-row {
  display: flex;
  flex-wrap: wrap;
}
</style>
